Bootstrap Snippet Animated search bar using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
           <div class="searching">
               <center>
                    <a href="javascript:void(0)" class="search-open">
                    <i class="fa fa-search"></i>
                </a>
                   
               </center>
               
                <div class="search-inline">
                    <form>
                        <input type="text" class="form-control" placeholder="Searching...">
                        <button type="submit">
                            <i class="fa fa-search"></i>
                        </button>
                        <a href="javascript:void(0)" class="search-close">
                            <i class="fa fa-times"></i>
                        </a>
                    </form>
                </div>
            </div>
            <script>
                 var sp = document.querySelector('.search-open');
            var searchbar = document.querySelector('.search-inline');
            var shclose = document.querySelector('.search-close');
            function changeClass() {
                searchbar.classList.add('search-visible');
            }
            function closesearch() {
                searchbar.classList.remove('search-visible');
            }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
        /* search start  */
        .search-inline {
            width: 100%;
            left: 0;
            padding-left: 15px;
            padding-right: 15px;
            top: 0;
            height: 10%;
            position: absolute;
            opacity: 0;
            visibility: hidden;
            background-color: #efefef;
            z-index: 9;
            transition: all .5s ease-in-out;
        }
        .search-inline.search-visible {
            opacity: 1;
            visibility: visible;
            animation: fadeInDown 0.4s ease-in-out;
        }
        .search-inline button[type="submit"] {
            position: absolute;
            right: 52px;
            top: 0;
            background-color: transparent;
            border: 0px;
            top: 0;
            right: 80px;
            padding: 0px;
            cursor: pointer;
            width: 80px;
            height: 99%;
            background: #222;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animated search bar"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Animated search bar" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Animated search bar"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY